<template>
  <!-- 横向滚动容器 -->
  <div v-resize-ob="handleResize" class="scroll-container">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'XScroll',
});
const size = reactive({
  width: 0,
  height: 0,
});
const handleResize = (sizes: { width: number; height: number }) => {
  size.width = sizes.width;
  size.height = sizes.height;
}
</script>

<style lang="scss" scoped>
.scroll-container {
  width: 100%;
  height: 100%;
  >.v-scroll {
    --w: calc(v-bind(size.width) * 1px);
    --h: calc(v-bind(size.height) * 1px);
    width: var(--h);
    height: var(--w);
    position: relative;
    transform-origin: left top;
    transform: translateY(var(--h)) rotate(-90deg);
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    >.content {
      width: var(--w);
      height: var(--h);
      position: absolute;
      left: var(--h);
      transform-origin: left top;
      transform: rotate(90deg);
    }
  }
}
</style>
